<template>
  <div id='JMZBchart' style="width: 650px;height:200px;margin:0 auto;"></div>
</template>

<script>
  import echarts from 'echarts'
  import {GETJMZBPIEDATA} from '@/../static/js/apis.js'

  export default {
    name: "JMZBchart",
    methods: {
      //绘制图形
      drawChart(pieData, pieDataFL) {
        let myChart = echarts.init(document.getElementById('JMZBchart'))
        let options = {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}家  ({d}%)"
          },
          legend: {
            orient: 'vertical',
            x: 'right',
            data: ['军口', '民口', '核', '航天', '航空', '船舶', '兵器', '军工电子', '高等院校', '中科院研究所', '国有', '国有控股', '民营']
          },
          series: [{
            name: '军民占比',
            type: 'pie',
            selectedMode: 'single',
            radius: ['45%', '60%'],
            label: {
              normal: {
                position: 'inner'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: pieData
          }, {
            name: '军民分类占比',
            type: 'pie',
            radius: ['60%', '80%'],
            data: pieDataFL
          }]
        }
        myChart.setOption(options, true)
      },
      //获取数据
      getData() {
        const self = this;
        GETJMZBPIEDATA('', function (res) {
          if (res.pieData && res.pieDataFL) {
            //绘制图形
            self.drawChart(res.pieData, res.pieDataFL);
          }
        })
      }
    },
    mounted() {
      this.getData();
    }
  }

</script>

<style scoped>

</style>
